import './wind.less';
import { IRouteComponentProps, NavLink } from 'umi'
import { Layout } from 'antd';
import React, { FC, useEffect, useState } from 'react';
const { Header, Sider, Content } = Layout;
const Page: FC<IRouteComponentProps> = (props) => {
  let [flag1, setflag1] = useState(false)
  // const [rollback, setrollback] = useState(0)
  window.addEventListener('scroll', function(){
    let res = document.documentElement.scrollTop
    this.document.querySelector('.header_box')
    if(res>1){
      setflag1(true)
    }
    if(res<1){
      setflag1(false)
    }

    console.log(res)

    // setrollback(res)
  });

  // useEffect(() => {
  //   if(rollback){
  //     // console.log(rollback)
  //   }
  // }, [rollback])
  // handleScroll=(event)=>{
  //   //滚动条高度
  //   let ctx=this;
  //   let clientHeight = document.documentElement.clientHeight; //可视区域高度
  //   let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
  //   let scrollHeight =document.documentElement.scrollHeight; //滚动内容高度
  //   if(scrollTop>500){
  //       ctx.setState({ style: { display: "block", } })
  //   }else
  //   {
  //       ctx.setState({ style: { display: "none", } })
  //   }
  //   let res=scrollHeight-scrollTop-clientHeight;
  //   if(res<=500){
  //       ctx.setState({ styles: { display: "none", } })
  //   }else {
  //       ctx.setState({ styles: { display: "block", } })
  //   }
  // }
  return (
    <Layout>
      <Header className='header'>
        <div className={flag1?'header_box header_tops':'header_box'}>
          <div className='header_container'>
            <div className="container_left_max">
              <a href="/" one-link-mark="yes">
                <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt=""/>
              </a>
            </div>
            <div className="container_right_min">
              <div className="container_right_title"></div>
              <div className="container_right_opac"></div>
              <div className="container_right_title"></div>
            </div>
            <nav className="container_zhong_max">
              <ul>
                <li className='list_li1'><NavLink to='/'><span>文章</span></NavLink></li>
                <li><NavLink to='/'><span>归档</span></NavLink></li>
                <li><NavLink to='/'><span>知识小册</span></NavLink></li>
                <li><NavLink to='/'><span>留言板</span></NavLink></li>
                <li><NavLink to='/'><span>关于</span></NavLink></li>
                <li className="list_right"><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10356" width="22" height="22"><path d="M426.688 96a330.688 330.688 0 0 1 255.36 540.8l228.096 228.096a32 32 0 0 1-45.248 45.248L636.8 682.048A330.688 330.688 0 1 1 426.624 96z m0 64a266.688 266.688 0 1 0 0 533.312 266.688 266.688 0 0 0 0-533.312z" p-id="10357"></path></svg></li>
                <li className="list_right"><span>太阳</span></li>
                <li className="list_right"><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17691" width="22" height="22"><path d="M521.784889 630.727111L410.168889 520.533333l1.308444-1.365333A768.568889 768.568889 0 0 0 574.577778 232.675556h128.796444V144.668444h-307.768889V56.888889H307.768889v87.779555H0v87.324445h491.008a692.906667 692.906667 0 0 1-139.377778 235.235555A692.053333 692.053333 0 0 1 250.197333 320.284444H162.133333a770.616889 770.616889 0 0 0 131.015111 200.135112l-223.573333 220.501333 62.236445 62.122667 219.818666-219.420445 136.704 136.476445 33.393778-89.315556z m247.466667-222.72h-87.893334L483.555556 934.627556h87.893333l49.493333-131.640889h208.782222l49.493334 131.640889H967.111111l-197.802667-526.620445z m-115.370667 307.2l71.452444-190.236444 71.452445 190.236444h-142.904889z" fill="#2c2c2c" p-id="17692"></path></svg></li>
              </ul>
            </nav>
          </div>
        </div>
        </Header>
        <Content className='content'>{props.children}</Content>
    </Layout>
  );
}
export default Page

      